<template>
  <!-- SPU属性数据列表 -->
  <div>
    <el-button :icon="Plus" type="primary" style="margin-bottom:15px"
      :disabled="!categorySelectorList.category3Id" @click="toAddSpu">添加SPU</el-button>
    <el-table :data="spuListData" border style="width: 100%">
      <el-table-column type="index" align="center" label="序号" width="90" />
      <el-table-column prop="spuName" label="SPU名称"></el-table-column>
      <el-table-column prop="description" label="SPU描述"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{row}">
          <el-button title="添加SKU" type="primary" size="small" :icon="Plus" @click="addSkuInfo(row)"/>
          <el-button title="修改SPU" type="primary" size="small" :icon="Edit" @click="updateSpuForm(row)"/>
          <el-button title="查看SKU列表" type="primary" size="small" :icon="InfoFilled" />
          <el-button title="删除SPU" type="danger" size="small" :icon="Delete" @click="deleteSpuInfo(row)"/>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination style="margin-top:20px" v-model:current-page="currentPage" v-model:page-size="pageSize"
      :page-sizes="[3, 5, 8, 10]" :small="small" :disabled="disabled" :background="background"
      layout=" prev, pager, next, jumper,->,total, sizes," :total=total @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
</template>

<script lang="ts">
export default {
  name: "SpuList"
}
</script>
<script setup lang="ts">
import { Plus, Edit, Delete, InfoFilled } from '@element-plus/icons-vue';
import { ref,watch } from 'vue'
import { useCategoryListStore } from "@/stores/categorySelectorList";
import { reqGetSpuListData, reqDeleteSpuInfo } from "@/api/product/spu"
import { ShowStatus } from '../types';
import { ElMessage } from 'element-plus';

// 创建store
const categorySelectorList = useCategoryListStore()
// 1.spuList数据
const spuListData = ref([])

// 接收父组件传递的数据 实现组件切换
const emits = defineEmits(["setShowStatus","getSpuInfo"])


// 分页器数据
const currentPage = ref(1)
const pageSize = ref(3)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const total = ref<number>(0)
// 设置每页展示的数量
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
  pageSize.value = val
  // 切换显示页数时 跳转到第一页
  currentPage.value = 1
  // 重新获取数据
  getSpuListData()

}
// 设置当前点击的页码
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`)
  currentPage.value = val
  // 重新获取数据
  getSpuListData()
}

// 1.发送请求 获取 spuList 列表数据
const getSpuListData = async () => {
  let result = await reqGetSpuListData(currentPage.value, pageSize.value, categorySelectorList.category3Id as number)
  // console.log(result)
  //  设置数据
  spuListData.value = result.records
  // 设置总数
  total.value=result.total
}


// 2.监听category3Id的变化 发送请求获取数据
watch(() => categorySelectorList.category3Id, () => {
  // 2.1 若不存在 category3Id 则不发送请求 且清空上一次数据
  if (!categorySelectorList.category3Id) {
    spuListData.value = []
    return 
  }
  // 2.2发送请求
  getSpuListData()
}, { immediate: true })

// 3.点击 添加SPU 按钮  跳转到 spuform
const toAddSpu= () => {
  // 3.1 跳转到 spuform页面
  emits("setShowStatus", ShowStatus.ADD_SPU)
  // 3.2 清空上一次数据
  emits("getSpuInfo",{})
}

// 4.点击 编辑 icon 
const updateSpuForm = (row) => {
  // 4.1数据回显 触发自定义事件 将数据传递给父组件
  emits("getSpuInfo",row)
  // 4.2跳转到spuform
  emits("setShowStatus",ShowStatus.ADD_SPU)
}

// 5.点击 删除  icon
const deleteSpuInfo = async(row) => {
  // 5.1 发送请求 
  await reqDeleteSpuInfo(row.id)
  // 5.2 消息提示
  ElMessage.success("删除数据成功！")
  // 5.3重新获取数据
  getSpuListData()
}

// 6. 点击 添加sku icon按钮
const addSkuInfo = (row) => {
  // 6.1触发自定义事件 跳转到 skuform
  emits("setShowStatus", ShowStatus.ADD_SKU)

  emits("getSpuInfo", row)
}

</script>

<style lang="scss" scoped>

</style>